<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<head> 
<script type="text/javascript" src="../../html/prototype.js"></script>
<script type="text/javascript" src="../../html/rico21/src/rico.js"></script>

	<style>
	/*struct style*/
	
	*{padding:0; margin:0;}
	a{ text-decoration:none; }
	a:hover{text-decoration:underline;}

	ul{ text-align:center;}
	li{ list-style:none; display:inline;} 
	img{ border:0;}
	
	/**
		form
	*/
	form .row{ margin:25px 0; clear:both; padding:2px; }

	form .row label {width:160px;float:left;display:block;}

	form .row input{ height:22px;font-size:125%;color:#999;}
        form .row input[type=text] { width : 230px; }
        form .row input[type=password] { width : 230px; }
	
	form .captcha{ margin-left:30%;}
	
	form .submit{padding:5px; margin-top:40px; background:#cee;}
	
	/**			
		table
	*/
	table{ width:100%;border-collapse:collapse;}
		caption{
			padding:5px;
			width:100%;	 
			text-align:left;
			color:#999;
		}
		th{
			color: #4f6b72;
			background:#dee;
			border: 1px solid #C1DAD7;
		        letter-spacing: 3px;
			text-transform: uppercase;
			text-align: left;
			padding: 1px 1px 1px 2px;
			font-weight:lighter;
			font-size:90%;
		}
		td{
			border: 1px solid #C1DAD7;
			background: #fff;
			padding: 1px 1px 1px 2px;
			color: #4f6b72;
			font-size:80%;
		}
	
	
	.content{ width:96%; margin:auto; height:auto; }

/* construct */
	body{ width:100%; font-family:Comic Sans MS, Calibri, Arial, Helvetica, sans-serif; font-size:12px; }

	#pre_header{ width:100%; height:18px;border-bottom:1px dotted #bdd; font-size:110%;color:#999;}
		#pre_header *{ margin:0 5px 0 0;}
		#pre_header a{color:#9bb;}


		#pre_header .sign{float:right;color:#069;}
		#pre_header .username{float:right;color:#bb0;}
		#pre_header .slash{color:#dde;}

		
	
	#header { width:100%; height:60px;}
		#header .title{ font-size:200%; color:#f69; float:left;}
		#header .sub_title{font-size:100%; color:#f9c; float:right;}
		#header .ico{ float:left; margin:5px; height:45px; width:45px; }
		#header .acm_icpc{ float:right; }
	
	#nav { height:19px; width:100%;font-size:115%;}
		#nav a{ margin: 0 15px; padding:0 10px;text-align:center; color:#fff; background:#abc; }
		#nav .active{ background:#dee;color:#999;}
		#nav a:hover{ background:#dee;color:#999;}
	#sub_nav{ height:19px; width:100%; background:#dee; font-size:115%;}
	
	#left{ width:15%; height:auto;float:left; margin:2px;}
		#left fieldset{ border:1px solid #069; padding:1px;}
		#left legend{ color:#069 ; }
	#main{ width:60%; float:left; margin:2px ; height:auto; font-family:Arial, Helvetica, sans-serif;}
	
	#right{ width:20%; height:auto; float:right; margin:2px; }
	
	#footer{ width:100%; text-align:center; color:#998; clear:both; border-top:1px dotted #ddd; font-family:Arial, Helvetica; }
		#footer a{color:#069;}


	div.error{ background:#FFeFeF;color:#f36;padding:5px; margin:5px 0; font-size:120%;}


	/*
		signin
	*/
	#signin{ width:60%; height:auto; padding:2px; margin:1px; border:1px solid #bdd; font-family:Arial, Helvetica, sans-serif;}
		#signin form label{ font-size:125%; float:left; color:#069; margin-left:7px;}
		#signin legend{color:#069;padding:1px;}

		#signin	form .row .username{width : 230px; }
		#signin	form .row .passwd{ width : 230px; }

		#signin a{color:#f69;}

	/*
		signup
	*/
	#signup{ }

	/**
		problem_list
	*/
	#problem_list{width:100%;}

		#problem_list .spec {
			border-left: 1px solid #C1DAD7;
			background:#eff;
			font-weight:lighter;
		}
	
	/**
		search for problems
	*/
		#problem_search{ width:100%; text-align:center; background:#eee;margin-top:15px;}
			#problem_search label{ color:#bbc; font-size:100%; text-transform:uppercase;}
			#problem_search input[type=text]{ border:1px solid #ddd;color:#666;}
			#problem_search select{ color:#666; border:1px solid #ddd;}
	
	/**
		pager
	*/
		#pager { width:100%; text-align:center;margin-top:5px; padding:1px;}
			#pager ul{ height:16px; padding:1px; margin:5px;}
			#pager li{ padding:1px; text-align:center;}
			#pager a{ padding:0 4px 0 4px;color:#069; border:1px solid #CCCCCC;}
			#pager a:hover{ background:#bdd; }
			
	/**
		problem_detail
	*/
		#problem_detail{width:100%;padding:1px;}
			#problem_detail .title{ width:100%; color:#336699; font-size:130%; text-align:center;}
			#problem_detail table{ width:60%;font-size:90%;float:left;}
			#problem_detail th{ text-transform:none; }
			
			#problem_detail fieldset{width:100%;height:auto;border:0;color:#666;}
			#problem_detail legend{color:#069;font-size:110%;}
		
			#problem_detail .submit{width:100%; padding:5px; margin-top:20px; background:#eee; text-align:center;}
			
	/**
		code
	*/
		#code{ width:100%; color:#999;}
			#code #content { font-size:115%; width:100%; height:auto; border:1px solid #bdd; border-bottom:0;}
			#code #content textarea{ border:0;  width:100%;}
			
			#code #informations{ width:auto;padding:1px;}
			#code #informations select{color:#999; font-size:110%;}
			
			#code button{ font-size:125%; }
			
			#code #result{ width:100%; height:auto;border:1px solid #bdd;}
			#code #result fieldset{border:0;}
			#code #result legend{color:#006699;}
			#code #result .error{color:#b10;}
			#code #result .w{}
			
			#code #control{ width:100% ; margin:2px 0 2px 0;}
				#code #control img{ width:16px; height:16px;}
				#code #control button{font-size:90%;}

	</style>
</head>

<body>

<!-- pro header -->
	<div id="pro_header">
		<div class="sign"><a href="#" >Sign in</a></div>
	<!--	<div class="sign"><a href="#">Sign out</a></div>
		<div class="username">Judasnow</div>
	-->
	</div>
<!-- header -->
	<div id="header">
		<div class="ico"><img src="images.jpeg" /></div>
		<div class="acm_icpc"><img src="acm_icpc.png" /></div>
		<div class="title">Suse acm/icpc online judge#lt?soj</div>
	</div>
	
<!-- dav -->
	<div id="nav">
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#" class="active">Contest</a></li>
		<li><a href="#">Problem</a></li>
		<li><a href="#">Ranklist</a></li>
		<li><a href="#">Bbs</a></li>
		<li><a href="#">Hello world</a></li>
	</ul>
	</div>
	<div id="sub_nav">
	</div>
	
	
	<div id="left">
	
	</div>
	<div id="main">
		<fieldset id="signup">
		<legend>Sign in</legend>
		<form action="../php/account/do_signin.php" method="post">
			<div class="error">error</div>

			<div id="username_container" class="row">
			<label for="username">Username</label>
			<input type="text" name="username" class="text"/>
			</div>
			
			<div id="passwd_container" class="row">
			<label for="password">Password</label>
			<input type="password" name="passwd" class="passwd"/>
			</div>
			
			<div id="mem_pass_container" class="row">
			<label for="mem_pass">Remanber you</label>
			<input type="checkbox" name="mem_pass" class="mem_pass"/>
			</div>
			
			<div id="forgot_pass_container" class="row">
			<label for="forgot_pass">Forgot password?</label>
			</div>
			
			<div class="submit">
			<input type="submit" value="Sign in" />
			</div>
		</form>
</fieldset>
	
	</div>
	<div id="right"></div>
	
	<div id="footer">{?soj index page?}</div>
</body>

<script type="text/javascript">

</script>
</html>
